import React from "react";
import SearchHeader from "./component/SearchHeader";
import TheTable from "@/components/TheTable";
import TheButton from "@/components/TheButton";
import "../style/style.less";
import ThePagination from "../../../components/ThePagination";
import {
  apiGetCommodityList,
  apiProductInfoPutaway,
} from "@/request/commodity";
import TheImage from "@/components/TheImage";

class List extends React.Component {
  state = {
    columns: [
      {
        title: "商品ID",
        dataIndex: "productId",
        key: "productId",
      },
      {
        title: "商品名称",
        dataIndex: "productName",
        key: "productName",
        render: (text, record) => {
          return (
            <div
              style={{
                width: 200,
                overflow: "hidden",
                whiteSpace: "nowrap",
                textOverflow: "ellipsis",
              }}
            >
              {record.productName}
            </div>
          );
        },
      },
      {
        title: "商品图片",
        dataIndex: "productShowImages",
        key: "productShowImages",
        render: (text) => {
          return <TheImage src={text} width={80} height={80} />;
        },
      },
      {
        title: "所属类目",
        dataIndex: "productClassifyName",
        key: "productClassifyName",
      },
      {
        title: "商品原价",
        dataIndex: "originalPrice",
        key: "originalPrice",
        render: (text) => {
          return <React.$Price price={text || 0} />;
        },
      },
      {
        title: "商品现价",
        dataIndex: "currentPrice",
        key: "currentPrice",
        render: (text) => {
          return <React.$Price price={text || 0} />;
        },
      },
      {
        title: "所属商家",
        dataIndex: "storeName",
        key: "storeName",
      },
      {
        title: "申请时间",
        dataIndex: "createTime",
        key: "createTime",
      },
      {
        title: "上次操作时间",
        dataIndex: "lastUpdateTime",
        key: "lastUpdateTime",
        render: (text, record) => {
          return record.lastUpdateTime ? record.lastUpdateTime : "/";
        },
      },
      {
        title: "操作人",
        dataIndex: "userName",
        key: "userName",
        render: (text, record) => {
          return record.userName ? record.userName : "/";
        },
      },
      {
        title: "状态",
        dataIndex: "productStatus",
        key: "productStatus",
        render: (text, render) => {
          let label = "";
          switch (render.productStatus) {
            case "Y":
              label = "上架";
              break;
            case "N":
              label = "下架";
              break;
            case "G":
              label = "管理员下架";
              break;
            default:
              label = "字段值错误";
          }
          return label;
        },
      },
      {
        title: "操作",
        fixed: "right",
        width: 300,
        render: (text, render) => {
          return (
            <div>
              <TheButton
                haspermi={["commodity:details"]}
                onClick={() => this.goDetail(render.productId)}
              >
                商品详情
              </TheButton>
              <TheButton
                haspermi={["commodity:evaluate"]}
                onClick={() =>
                  this.goEvaluate(
                    render.productId,
                    render.storeName,
                    render.storeId
                  )
                }
              >
                商品评价
              </TheButton>
              {(render.productStatus === "N" ||
                render.productStatus === "G") && (
                <TheButton
                  haspermi={["commodity:state"]}
                  onClick={() => this.putShelf(render.productId, "Y")}
                >
                  上架
                </TheButton>
              )}
              {render.productStatus === "Y" && (
                <TheButton
                  haspermi={["commodity:state"]}
                  onClick={() => this.offShelf(render.productId, "G")}
                >
                  下架
                </TheButton>
              )}
              {/* {render.productStatus === 'G' && <TheButton onClick={this.goEvaluate}>下架</TheButton>} */}
            </div>
          );
        },
      },
    ],
    dataSource: [],
    pageData: {
      pageNo: 1,
      pageSize: 10,
    },
    total: 0,
    searchValue: {},
  };
  async componentDidMount() {
    if (localStorage.getItem("searchValue") && localStorage.getItem("pageNo")) {
      let search = JSON.parse(localStorage.getItem("searchValue"));
      this.setState(
        {
          searchValue: search,
          pageData: {
            pageNo: localStorage.getItem("pageNo"),
            pageSize: 10,
          },
        },
        async () => {
          await this.getData();
        }
      );
    } else if (localStorage.getItem("pageNo")) {
      this.setState(
        {
          pageData: {
            pageNo: localStorage.getItem("pageNo"),
            pageSize: 10,
          },
        },
        async () => {
          await this.getData();
        }
      );
    } else {
      await this.getData();
    }
  }
  getData = async () => {
    const { pageData, searchValue } = this.state;
    let res = await apiGetCommodityList({
      ...pageData,
      ...searchValue,
      reviewStatus: "T",
    });
    if (res.code === 0 && res.data) {
      this.setState({
        dataSource: res.data,
        pageData: { pageNo: res.pageNo, pageSize: res.pageSize },
        total: res.totalCount,
      });
    }
  };
  getValue = (value) => {
    this.setState(
      { searchValue: value, pageData: { pageNo: 1, pageSize: 10 } },
      () => {
        this.getData();
        let search = JSON.stringify(this.state.searchValue);
        localStorage.setItem("searchValue", search);
        localStorage.setItem("pageNo", this.state.pageData.pageNo);
      }
    );
  };
  goDetail = (productId) => {
    this.props.history.push(`/commodity/list/detail/${productId}`);
  };
  goEvaluate = (productId, storeName, storeId) => {
    this.props.history.push(
      `/commodity/list/evaluate/${productId}/${encodeURIComponent(
        storeName
      )}/${storeId}`
    );
  };
  pageChange = (pageNo, pageSize) => {
    this.setState(
      {
        pageData: {
          pageNo,
          pageSize,
        },
      },
      () => {
        localStorage.setItem("pageNo", this.state.pageData.pageNo);
        this.getData();
      }
    );
  };
  delConfirm = () => {
    React.$confirm({
      title: "您确认删除此条商品吗?",
      onOk: async () => {},
    });
  };
  offShelf = (productId, productStatus) => {
    React.$confirm({
      title: "您确定下架该商品吗？",
      onOk: async () => {
        await apiProductInfoPutaway({ productId, productStatus });
        await this.getData();
      },
    });
  };
  putShelf = (productId, productStatus) => {
    React.$confirm({
      title: "您确定上架该商品吗？",
      onOk: async () => {
        await apiProductInfoPutaway({ productId, productStatus });
        await this.getData();
      },
    });
  };
  render() {
    const {
      columns,
      dataSource,
      pageData: { pageNo, pageSize },
      total,
    } = this.state;
    return (
      <div className={"p-layout-box commodity-content"}>
        <SearchHeader history={this.props.history} getValue={this.getValue} />
        <div className="p-layout-content-pagination">
          <TheTable
            scroll={{ x: "max-content", y: "63vh" }}
            columns={columns}
            dataSource={dataSource}
          />
          <ThePagination
            pageNo={pageNo}
            pageSize={pageSize}
            total={total}
            pageChange={this.pageChange}
          />
        </div>
      </div>
    );
  }
}

export default List;
